<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子模型</title>
    <style>
        div{
            width: 200px;
            height: 200px;
        }

        /* 
            块级元素：独占一行，可以设置宽高的属性，例如：div p h 标签等
            行内元素：不会换行，不能设置宽高等属性，例如：span a 标签等
            行内块元素：行内元素 + 宽高属性
        */
        .b1{
            background-color: lightblue;
            /* 块级元素 -> 行内元素 */
            /* display: inline; */
            /* 块级元素 -> 行内块元素 */
            display: inline-block;
        }

        .b2{
            background-color: lightcoral;
            display: inline-block;
        }

        .b3{
            /* 边框：宽度  样式  颜色 */
            /* solid实线  dotted点线 dashed虚线  double双实线 */
            /* 边框的四边一起设置 */
            /* border: 3px double orange; */
            /* 边框的上下左右分别设置 */
            border-right: 2px solid grey;
        }

        .b4{
            background-color: cadetblue;
            /* 渐变 */
            transition: all 2s linear 0s;
        }

        .b4:hover{
            /* 圆角 */
            border-radius: 50%;
            /* 阴影 inset内嵌  x轴偏移量 y轴偏移量 模糊半径 颜色 */
            box-shadow: inset 10px 10px 10px lightgray;
        }

        #b5{
            background-color: green;
            /* 外边距： 边界（margin）, 边框与边框之间的距离  例如：上右下左  上下 左右  */
            /* margin: 30px; */
            /* margin: 10px 20px 30px 40px; */
            /* margin: 10px 30px; */
            /* 水平位置居中 */
            margin: auto;
        }
        #b6{
            background-color: blue;
            /* 内边距: 填充（padding）, 内容和边框的距离 例如：上右下左  上下 左右  */
            padding: 30px;
        }
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="b3"></div>
    <div class="b4"></div>
    <br>
    <br>
    <br>
    <br>
    <div id="b5"></div>
    <div id="b6"></div>
</body>
</html>
